<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<title>我要订仓</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/barnKeep.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.barn-board{height: 236px;background: url(images/barn_bg.png) no-repeat center center /cover;padding: 30px 30px 0;box-sizing: border-box;}
			.barn-board::after{display: block;content: "";clear: both;}
			.barn-board .model{float: left;font-size: 40px;background: url(images/label.png) no-repeat left center;background-size: 32px 32px;padding-left: 50px;font-weight: 600;width: 136px;}
			.barn-board .mid-cont{float: left;text-align: center;font-size: 24px;width: 322px;}
			.barn-board .mid-cont .barn-type{font-size: 32px;font-weight: 600;}
			.barn-board .mid-cont .classy{font-size: 28px;font-weight: 600;margin-top: 15px;margin-bottom: 20px;}
			.barn-board .mid-cont .area{margin-top: 20px;}
			.barn-board .price-wrap{float: right;text-align: center;width: 180px;}
			.barn-board .price-wrap .new-price{font-size: 28px;font-weight: 600;}
			.barn-board .price-wrap .new-price span{font-size: 40px;}
			.barn-board .price-wrap .orig-price{text-decoration: line-through;font-size: 22px;}
		</style>
	</head>
	<body style="background: #f3f3f3;">
		<div class="wrapper">
			<div class="content">
				<div class="barn-board">
					<div class="model">C138</div>
					<div class="mid-cont">
						<div class="barn-type">中仓</div>
						<div class="classy">4.5m³ 高2.1m</div>
						<div class="format">100mm * 100mm * 100mm</div>
						<div class="area">佛奥广场店</div>
					</div>
					<div class="price-wrap">
						<div class="new-price">￥<span>24</span>元</div>
						<div class="orig-price">原价：￥<span>24</span>元</div>
					</div>
				</div>
				<div class="seat-wrap">
					<div class="select">
						<a href="javascript:void(0);" class="smaller">小一点</a>
						<a href="javascript:void(0);" class="bigger">大一点</a>
					</div>
					<div class="region">
						<p>A区</p>
						<div class="partition">
							<div class="lists saved">
								<p class="par-num">01</p>
								<p class="par-sta">已存位</p>
							</div>
							<div class="lists">
								<p class="par-num">02</p>
								<p class="par-sta">空位</p>
							</div>
							<div class="lists">
								<p class="par-num">03</p>
								<p class="par-sta">空位</p>
							</div>
							<div class="lists">
								<p class="par-num">04</p>
								<p class="par-sta">已付管理费</p>
							</div>
							<div class="lists">
								<p class="par-num">05</p>
								<p class="par-sta">空位</p>
							</div>
							<div class="lists">
								<p class="par-num">06</p>
								<p class="par-sta">预定</p>
							</div>
							<div class="lists">
								<p class="par-num">07</p>
								<p class="par-sta">已办理迁出</p>
							</div>
							<div class="lists">
								<p class="par-num">08</p>
								<p class="par-sta">已办理迁出</p>
							</div>
							<div class="lists">
								<p class="par-num">09</p>
								<p class="par-sta">已办理迁出</p>
							</div>
							<div class="lists saved">
								<p class="par-num">10</p>
								<p class="par-sta">已存位</p>
							</div>
							<div class="lists">
								<p class="par-num">11</p>
								<p class="par-sta">空位</p>
							</div>
							<div class="lists">
								<p class="par-num">12</p>
								<p class="par-sta">空位</p>
							</div>
							<div class="lists">
								<p class="par-num">13</p>
								<p class="par-sta">已付管理费</p>
							</div>
							<div class="lists">
								<p class="par-num">14</p>
								<p class="par-sta">空位</p>
							</div>
							<div class="lists">
								<p class="par-num">15</p>
								<p class="par-sta">预定</p>
							</div>
							<div class="lists rent">
								<p class="par-num">16</p>
								<p class="par-sta">租位</p>
							</div>
							<div class="lists">
								<p class="par-num">17</p>
								<p class="par-sta">已办理迁出</p>
							</div>
							<div class="lists saved">
								<p class="par-num">18</p>
								<p class="par-sta">已存位</p>
							</div>
						</div>
					</div>
					<div class="mark">
						<i></i>
						<p>您的仓位</p>
					</div>
				</div>
				
				<div class="deadline">
					<div class="date">
						启用日期
						<input type="date" value="" id="date"/>
					</div>
					<div class="time">
						续费期限
						<select name="">
							<option value="1">1个月</option>
							<option value="2">3个月</option>
						</select>
					</div>
					<div class="bottom">
						<div class="offer">6个月（可享受95折）</div>
					</div>
				</div>
				
				<div class="lease">
					<div class="rent">
						<label for="">租仓费用</label>
						<div class="rent-price">￥1100</div>
					</div>
					<div class="deposit">
						<label for="">押金(1个月)</label>
						<div class="depo-price">￥200</div>
					</div>
				</div>
				
				<div class="extraneous">
					<div class="sub-title">
						<span>额外需求</span>
						<i></i>
					</div>
					<div class="sub-cont">
						<div class="column">
							<label for="freight">
								<div class="label">货运</div>
								<div class="right-cont">
									<div class="check-wrap">
										<input type="checkbox" id="freight"/>
										<div></div>
									</div>
								</div>
							</label>
						</div>
						<div class="column">
							<label for="hauling">
								<div class="label">搬运（司机另议）</div>
								<div class="right-cont">
									<div class="check-wrap">
										<input type="checkbox" id="hauling"/>
										<div></div>
									</div>
								</div>
							</label>
						</div>
						<div class="column">
							<div class="label">购买密码锁</div>
							<div class="right-cont">
								<div class="amount-edit">
									<a href="javascript:void(0);" class="minus_btn"></a>
									<input type="tel" class="text_box" value="1">
									<a href="javascript:void(0);" class="add_btn"></a>
								</div>
								<div id="lock_price">￥<span>9.00</span></div>
							</div>
						</div>
						<div class="column">
							<div class="label">购买包装纸箱</div>
							<div class="right-cont">
								<div class="amount-edit">
									<a href="javascript:void(0);" class="minus_btn"></a>
									<input type="tel" class="text_box" value="1">
									<a href="javascript:void(0);" class="add_btn"></a>
								</div>
								<div id="carton_price">￥<span>9.00</span></div>
							</div>
						</div>
						<div class="column">
							<div class="label">留言：</div>
							<div class="right-cont">
								<input type="text" placeholder="请输入您的需求"/>
							</div>
						</div>
					</div>
					<div class="extraneous-total">额外费用：<div>￥<span>9.00</span></div></div>
				</div>
				
				<div class="promo-code">
					<label for="" class="prom-lab">优惠码</label>
					<input type="text" class="prom-inp" disabled=""/>
					<input type="button" value="确认" class="prom-but"/>
				</div>
				
				<ul class="sum-wrap">
					<li>
						<label for="">优惠后单价：</label>
						<p class="redu-price">￥1100</p>
					</li>
					<li>
						<label for="">额外费用：</label>
						<p class="extr-price">￥1100</p>
					</li>
					<li>
						<label for="">原价：</label>
						<p class="orig-price">￥1100</p>
					</li>
					<li>
						<label for="">优惠：</label>
						<p class="offer-price">-￥0</p>
					</li>
					<li>
						<label for="">应付：</label>
						<p class="act-paid">￥<span>1100</span></p>
					</li>
				</ul>
				
				<div class="rate">
					<label for="">储存品估价</label>
					<input type="text" placeholder="请输入存放物品估算金额（元）"/>
				</div>
				
				<div class="tips">
					若您的物品估算金额超出<span>￥5000元</span>，超出部分请您<span>自行投保</span>或<span>联系客服</span>。
				</div>
				
				<div class="pact-wrap">
					<div class="check-box">
						<input type="checkbox" id="agree"/>
						<div></div>
					</div>
					<label for="agree">我已阅读并同意<a href="javascript:void(0);" class="pact">《金刚迷你仓订仓协议》</a></label>
				</div>
				
				<input type="submit" value="下一步" class="confirm-btn" onclick="location='fillInfomation.html';"/>
			</div>
			
			<!--协议弹窗-start-->
			<div class="mask none"></div>
			<div class="main-cont">
				<div class="head">
					<button class="cfm-btn">确认</button>
				</div>
				<div class="protocol">
					协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议
				</div>
			</div>
			<!--协议弹窗-end-->
		</div>
		
		<script type="text/javascript">
			//按钮加
			$(".add_btn").click(function(){
        		var num = $(this).parent().find('.text_box').val();
        		num++;
        		$(this).parent().find('.text_box').val(num);
		 	});
		 	//按钮减
			$(".minus_btn").click(function(){
        		var num = $(this).parent().find('.text_box').val();
        		if( num > 1 ){
					num -= 1;
        			$(this).parent().find('.text_box').val(num);
        		}
			});
			//数量编辑
        	$('.text_box').bind('input propertychange',function(){
				if(!isNaN($(this).val()) && $(this).val() != '' && $(this).val() != 0){
            		var num = $(this).val();
				}else{
					$(this).val('1');
				}
			});
		
			//选择优惠
			$('.offer').click(function(){
				if($(this).hasClass('active')){
					$(this).removeClass('active');
					$('.promo-code').removeClass('on').find('.prom-inp').val('').attr({'disabled':true,'placeholder':''});
				}else{
					$(this).addClass('active');
					$('.promo-code').addClass('on').find('.prom-inp').attr({'disabled':false,'placeholder':'请输入优惠码'});
				}
			});
			
			
			//启用日期显示当前时间
			var ddd = new Date();
			var day =ddd.getDate();
			
			if(ddd.getMonth()<10){
				var month = "0"+(ddd.getMonth()+1); 
			}
			
			if(ddd.getDate()<10){
				day = "0"+ddd.getDate(); 
			}
			
			var datew = ddd.getFullYear()+"-"+month+"-"+day;
			var datew = datew.toString();
			
			$("#date").val(datew);
			
			//查看协议
			$('.pact').click(function(){
				$('.mask').show();
				$('.main-cont').addClass('go-top');
			});
			$('.cfm-btn').click(function(){
				$('.mask').hide();
				$('.main-cont').removeClass('go-top');
			});
		
			//展开额外需求内容
			$('.extraneous .sub-title').click(function(){
				if($(this).hasClass('active')){
					$(this).removeClass('active');
					$('.extraneous .sub-cont').slideUp();
					$('.extraneous .sub-title i').css({
						'-webkit-transform':'rotate(-135deg)',
						'transform':'rotate(-135deg)',
						'margin-top':'30px'
					});
				}else{
					$(this).addClass('active');
					$('.extraneous .sub-cont').slideDown();
					$('.extraneous .sub-title i').css({
						'-webkit-transform':'rotate(45deg)',
						'transform':'rotate(45deg)',
						'margin-top':'38px'
					});
				}
			});
		</script>
	</body>
</html>
